<template>
	<view>
		<view class="common-tips-box">
			<view class="t1">{{title.t1}}
				<view class="tips-box"><text class="checked">{{step}}</text>/5</view>
			</view>
			<view class="t2">{{title.t2}}</view>
			<view class="checkWelfareList-box" v-if="step == 5">
				<view class="checkWelfareList-item" v-for="(item, index) in form.checkWelfareList" :key="index">{{item}}</view>
			</view>
		</view>
		<view class="company-main" :style="{'margin-top': marginTop + 'px'}">
			<view class="step1 step-box" v-if="step == 1">
				<view class="logo-item_zp" v-if="form.logo" data-key="logo" @click="handleChooseImage">
					<image :src="`${host}/${form.logo}`" mode="aspectFill"></image>
					<view class="txt">点击替换</view>
				</view>
				<view class="logo-item_zp add_zp" data-key="logo" v-else @click="handleChooseImage">
					<text class="iconfontPT iconic_join_dialing_norm" style="margin-top: 20rpx;"></text>
					添加图片
				</view>
			</view>
			<view class="step2 step-box" v-if="step == 2">
				<view class="item-box">
					<input placeholder="请填写公司名称" v-model="form.title" bindinput="inputUpdateDataFn" data-key="title" maxlength="42"></input>
				</view>
				<navigator class="navigator-box" hover-class="hoverClass2" url="/pages/recruit/industry-model/index">
					<view :class="{'tips-txt': detail.industry}">
						{{ detail.industry || '请选择公司行业'}}
						<text class="iconfontPT iconxiayibu pull-right"></text>
					</view>
				</navigator>
				<view class="item-box hidden-border">
					<textarea placeholder="请填写公司介绍" bindinput="inputUpdateDataFn" maxlength="800" data-key="introduce" v-model="form.introduce"></textarea>
				</view>
				<view class="item-box hidden-border">
					<view :class="{'logo-item_zp': true, 'next': index == 2}" v-for="(item, index) in form.environmental_img" :key="index">
						<text class="iconfontPT iconshanchu" :data-index="index" @click="removeImgFn"></text>
						<image :src="`${host}/${item}`"></image>
					</view>
					<view class="logo-item_zp add_zp" v-if="form.environmental_img.length < 3" data-key="environmental_img" @click="handleChooseImage">
						<text class="iconfontPT iconic_join_dialing_norm"></text>
						添加公司形象照
					</view>
				</view>
			</view>
			<view class="step3 step-box" v-if="step == 3">
				<view class="job-box">
					<view class="tit">工作时间</view>
					<picker mode="multiSelector" @change="bindMultiPickerChange" data-key="jobTime" :value="jobTimeIndex" :range="jobTimeList">
						<view :class="{'picker': true, 'tips-txt': !form.jobTime}">
							{{ form.jobTime || '选择工作时间' }}
							<text class="iconfontPT iconxiayibu pull-right"></text>
						</view>
					</picker>
				</view>
				<view class="job-box">
					<view class="tit">休息时间</view>
					<view :class="{'picker': true, 'tips-txt': !form.restTime}" data-type="1" @click="showModelFn">
						{{ form.restTime || '选择休息时间' }}
						<text class="iconfontPT iconxiayibu pull-right"></text>
					</view>
				</view>
				<view class="job-box">
					<view class="tit">加班情况</view>
					<view :class="{'picker': true, 'tips-txt': !form.overTime}" data-type="2" @click="showModelFn">
						{{ form.overTime || '选择加班情况' }}
						<text class="iconfontPT iconxiayibu pull-right"></text>
					</view>
				</view>
			</view>
			<view class="step4 step-box" v-if="step == 4">
				<view class="job-box">
					<view class="tit">公司规模</view>
					<picker @change="bindMultiPickerChange" data-key="companySize" :range="companySizeList">
						<view :class="{'picker': true, 'tips-txt': !form.companySize}">
							{{ form.companySize || '选择公司规模' }}
							<text class="iconfontPT iconxiayibu pull-right"></text>
						</view>
					</picker>
				</view>
				<view class="job-box">
					<view class="tit">融资状态</view>
					<picker @change="bindMultiPickerChange" data-key="financingStatus" :range="financingStatusList">
						<view :class="{'picker': true, 'tips-txt': !form.financingStatus}">
							{{ form.financingStatus || '选择融资状态' }}
							<text class="iconfontPT iconxiayibu pull-right"></text>
						</view>
					</picker>
				</view>
				<view class="job-box">
					<view class="tit">公司地址</view>
					<view hover-class="hoverClass2" @click="handleChooseLocation">
						<view :class="{'picker': true, 'tips-txt': !form.address}">
							{{ form.address  || '选择公司地址' }}
							<text class="iconfontPT iconxiayibu pull-right"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="step5 step-box" v-if="step == 5">
				<view class="for-box" v-for="(item1, index1) in welfareList" :key='index1'>
					<text class="tit">{{item1.name}}</text>
					<view class="view-item" v-for="(item2, index2) in item1.levelList" :key='index2'>
						<text :class="[`iconfontPT iconleft ${item2.alias}`]"></text>
						<view class="view-right">
							<view class="t1" @click="checkWelfareFn" :data-classa="index1" :data-classb="index2">{{ item2.name}}
								<text :class="{'iconfontPT iconright': true, 'iconxuanzhong': item2.check == 1, 'iconjiahao': item2.check !== 1}"></text>
							</view>
							<view class="t2">{{ item2.desc}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<btnTpl @confirmEvent="stepEventFn" v-if="step != 5">下一步</btnTpl>
		<btnTpl @confirmEvent="submitEventFn" v-if="step == 5">保存</btnTpl>
		<view v-if="showModel == 1" class="bg" @click="hiddenModelFn"></view>
		<view class="showModel-box" :style="{'bottom': showModel == 1 ? '0rpx' : '-100vh'}">
			<view class="restTime-box" v-if="showModelState == 1">
				<view :class="{'common-item restTime-item': true, 'curr': form.restTime == item}" v-for="(item, index) in restTimeList"
				 data-key="restTime" :key="index" :data-item="item" @click="checkCommonItemFn">{{item}}</view>
			</view>
			<view class="overTime-box" v-if="showModelState == 2">
				<view :class="{'common-item overTime-item': true, 'curr' : form.overTime == item}" v-for="(item, index) in overTimeList"
				 data-key="overTime" :key="index" :data-item="item" @click="checkCommonItemFn">{{item}}</view>
			</view>
		</view>
		<image-compress style="position: absolute; top: 0rpx; overflow: hidden;" ref='imageCompress' />
	</view>
</template>

<script>
	import {
		setCompanyInfo
	} from '../../../apis/recruit/index.js'
	import btnTpl from '../../components/recruit/btn-tpl.vue'
	import location from '../../../utils/location.js'
	import {
		base
	} from '../../../setting.js'

	export default {
		data() {
			return {
				step: 1,
				detail: {
					industry: ''
				},
				restTimeList: ['单休', '双休', '大小周', '轮休'],
				overTimeList: ['不加班', '偶尔加班', '经常加班', '弹性工作'],
				jobTimeList: [],
				jobTimeIndex: [18, 36],
				companySizeList: ['0-20人', '20-50人', '50-99人', '100-500人', '500-1000人', '1000人以上'],
				financingStatusList: ['未融资', '种子轮', '天使轮', 'A轮', 'A+', 'B轮', 'C轮', 'D轮', 'E轮', 'F轮', '已上市'],
				welfareList: [{
					name: '保险',
					levelList: [{
						name: '五险一金',
						alias: 'iconqianbao',
						desc: '缴纳养老保险、医疗保险、失业保险、工伤保险、生育保险和住房公积金',
						check: 1,
					}, {
						name: '补充医疗保险',
						alias: 'iconbuchongyiliaobaoxian',
						desc: '补充医疗保险、商业医疗保险和社会医疗保险等多种形式',
						check: 0,
					}, {
						name: '定期体检',
						alias: 'icondingqitijian',
						desc: '阶段性健康体检',
						check: 0,
					}]
				}, {
					name: '薪资期权',
					levelList: [{
						name: '加班补助',
						alias: 'iconjiabanbuzhu',
						desc: '正常工作之外的工作报酬',
						check: 0,
					}, {
						name: '全勤奖',
						alias: 'iconquanqinjiang',
						desc: '对于全勤员工给与全勤奖',
						check: 0,
					}, {
						name: '年终奖',
						alias: 'iconnianzhongjiang1',
						desc: '年末给与员工年终奖励',
						check: 0,
					}, {
						name: '股票期权',
						alias: 'icongupiaoqiquan',
						desc: '对于优秀员工给与股票期权',
						check: 0,
					}]
				}, {
					name: '度假休假',
					levelList: [{
						name: '带薪年假',
						alias: 'iconlvyouche',
						desc: '对于优秀员工给与股票期权',
						check: 0,
					}, {
						name: '员工旅游',
						alias: 'iconyuangonglvyou',
						desc: '对于优秀员工给与股票期权',
						check: 0,
					}]
				}, {
					name: '生活补贴',
					levelList: [{
						name: '通讯补贴',
						alias: 'icontongxunbutie',
						desc: '补贴员工因公实际发生的公务话费',
						check: 0,
					}, {
						name: '交通补助',
						alias: 'iconjiaotongbutie',
						desc: '补贴员工因公实际发生的交通费用',
						check: 0,
					}, {
						name: '包吃',
						alias: 'iconbaochi1',
						desc: '补贴员工因公实际发生的饮食费用',
						check: 0,
					}, {
						name: '节日福利',
						alias: 'iconjierifuli1',
						desc: '法定或者特定节日时为员工提供礼物',
						check: 0,
					}, {
						name: '住房补贴',
						alias: 'iconzhufangbutie',
						desc: '每月员工因公实际发生的住宿费用',
						check: 0,
					}, {
						name: '零食下午茶',
						alias: 'iconxiawucha1',
						desc: '为元提供零食、饮料水果为下午茶',
						check: 0,
					}]
				}],
				form: {
					logo: '',
					title: '', //公司名称
					introduce: '', //公司简介
					industry: '', //公司行业
					environmental_img: [],
					jobTime: '',
					restTime: '',
					overTime: '',
					companySize: '',
					financingStatus: '',
					checkWelfareList: ['五险一金'],
					address: '', //地址
					province: '', //省
					city: '', //市
					region: '' //区
				},
				title: {
					t1: '添加公司LOGO',
					t2: '公司logo将展示在公司主页，请上传高清图片。'
				},
				showModel: 0,
				showModelState: 2,
				marginTop: 170
			}
		},
		onLoad(options) {
			let list = []
			for (let i = 0; i <= 23; i++) {
				list.push(`${i<10? 0+''+i : i}:00`)
				list.push(`${i < 10 ? 0 + '' + i : i}:30`)
			}
			this.jobTimeList[0] = list
			this.jobTimeList[1] = list

			this.initDomTitleFn();
		},
		computed: {
			host() {
				return this.$baseHost.car
			}
		},
		components: {
			btnTpl
		},
		methods: {
			//编辑公司信息
			submitEventFn() {
				let _this = this;
				let params = {
					logo: _this.form.logo, //logo
					title: _this.form.title, //公司名称
					introduce: _this.form.introduce, //公司简介
					industry: _this.detail.industry, //公司行业
					environmental_img: _this.form.environmental_img.join(','), //公司环境图
					s_work_hours: _this.form.jobTime.split('-')[0],
					e_work_hours: _this.form.jobTime.split('-')[1],
					overtime: _this.form.overTime, //休息时间
					scale: _this.form.companySize, //公司规模
					rest_time: _this.form.restTime, //休息时间
					financing: _this.form.financingStatus, //融资情况
					welfare: _this.form.checkWelfareList.join(','), //福利待遇
					address: _this.form.address, //地址
					province: _this.form.province, //省
					city: _this.form.city, //市
					region: _this.form.region //区
				}
				setCompanyInfo(params).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '编辑公司资料成功',
							duration: 1500
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/recruit/my/index',
							})
						}, 1500);
					}
				})
			},

			//选择地址
			handleChooseLocation() {
				let that = this;
				uni.chooseLocation({
					success: (res) => {
						that.getStreetDtlFn(res.latitude, res.longitude)
					}
				});
			},
			//根据定位获取街道
			getStreetDtlFn(latitude, longitude) {
				let that = this;
				location(latitude, longitude)
					.then(res => {
						that.form.province = res.data.result.address_component.province
						that.form.city = res.data.result.address_component.city
						that.form.region = res.data.result.address_component.district
						that.form.address = res.data.result.address
					})
			},
			/**
			 * 选择图片上传
			 */
			handleChooseImage(e) {
				let _this = this,
					key = e.currentTarget.dataset.key,
					keyName = 'form.' + key;
				this.$uploadImage({imageCompressFn: this.$refs.imageCompress.start})
					.then(response => {
						if (key == 'logo') {
							_this.form.logo = response
						} else {
							_this.form.environmental_img = _this.form.environmental_img.concat([response])
						}
					})
			},
			removeImgFn(e) {
				let index = e.currentTarget.dataset.index;
				let _this = this;
				_this.form.environmental_img.splice(index, 1)
				this.form.environmental_img = _this.form.environmental_img
			},
			//输入框公共数据绑定方法
			inputUpdateDataFn(e) {
				let _this = this,
					key = e.currentTarget.dataset.key;
				_this.form[key] = e.detail.value
			},
			//步骤验证方法
			stepEventFn() {
				let step = this.step;
				let _this = this;
				let status = true;
				switch (parseInt(step)) {
					case 1:
						if (!_this.form.logo) {
							status = false;
							uni.showToast({
								title: '请先上传企业logo图',
								icon: 'none',
								duration: 1500
							})
						}
						break;
					case 2:
						if (!_this.form.title) {
							status = false;
							uni.showToast({
								title: '请填写公司名称',
								icon: 'none',
								duration: 1500
							})
						} else if (!_this.detail.industry) {
							status = false;
							uni.showToast({
								title: '请选择公司行业',
								icon: 'none',
								duration: 1500
							})
						} else if (!_this.form.introduce) {
							status = false;
							uni.showToast({
								title: '请填写公司简介',
								icon: 'none',
								duration: 1500
							})
						} else if (_this.form.environmental_img.length < 1) {
							status = false;
							uni.showToast({
								title: '请至少上传一张公司图片',
								icon: 'none',
								duration: 1500
							})
						}
						break;
					case 3:
						if (!_this.form.jobTime) {
							status = false;
							uni.showToast({
								title: '请选择工作时间',
								icon: 'none',
								duration: 1500
							})
						} else if (!_this.form.restTime) {
							status = false;
							uni.showToast({
								title: '请选择休息时间',
								icon: 'none',
								duration: 1500
							})
						} else if (!_this.form.overTime) {
							status = false;
							uni.showToast({
								title: '请选择公司加班情况',
								icon: 'none',
								duration: 1500
							})
						}
						break;
					case 4:
						if (!_this.form.companySize) {
							status = false;
							uni.showToast({
								title: '请选择公司规模',
								icon: 'none',
								duration: 1500
							})
						} else if (!_this.form.financingStatus) {
							status = false;
							uni.showToast({
								title: '请选择公司融资状况',
								icon: 'none',
								duration: 1500
							})
						} else if (!_this.form.address) {
							status = false;
							uni.showToast({
								title: '请选择公司地址',
								icon: 'none',
								duration: 1500
							})
						}
						break;
				};
				if (status) {
					this.step = step + 1
					this.initDomTitleFn();
				}
			},
			//根据步骤初始化dom的文案
			initDomTitleFn() {
				let _this = this,
					title = {
						t1: '添加公司LOGO',
						t2: '公司logo将展示在公司主页，请上传高清图片。'
					}
				switch (parseInt(this.step)) {
					case 2:
						title.t1 = '编辑公司简介'
						title.t2 = '可简单介绍一下公司的发展状况，服务领域，主要产品等的信息'
						break;
					case 3:
						title.t1 = '公司上班时间'
						title.t2 = '添加的工作时间，时间仅为求职者提供参考，不代表公司所有职位的工作时间'
						break;
					case 4:
						title.t1 = '公司经营情况'
						title.t2 = '填写完整的公司信息，更易获得求职者的认可'
						break;
					case 5:
						title.t1 = '公司福利'
						title.t2 = '选择完整的公司福利，以吸引更多求职者'
						break;
				}
				let query = uni.createSelectorQuery();
				query.select('.common-tips-box').boundingClientRect();
				query.exec((Qres) => {
					_this.marginTop = Qres[0].height + 20
				})
				this.title = title

			},
			//选择工作时间-公司规模-融资状态
			bindMultiPickerChange(e) {
				let _this = this,
					dataList = [],
					value = e.detail.value,
					key = e.currentTarget.dataset.key,
					$value = '';
				switch (key) {
					case 'jobTime':
						$value = this.jobTimeList[0][value[0]] + '-' + this.jobTimeList[1][value[1]]
						break;
					case 'companySize':
						$value = this.companySizeList[value]
						break;
					case 'financingStatus':
						$value = this.financingStatusList[value]
						break;
				}
				this.form[key] = $value
			},
			//公司规模
			showModelFn(e) {
				this.showModel = 1
				this.showModelState = e.currentTarget.dataset.type
			},
			//隐藏model
			hiddenModelFn() {
				this.showModel = 0
			},
			//选择公司规模和加班情况的公共方法
			checkCommonItemFn(e) {
				let {
					key,
					item
				} = e.currentTarget.dataset

				this.form[key] = item
				this.showModel = 0
			},
			//选择和取消选择公司福利方法
			checkWelfareFn(e) {
				let welfareList = this.welfareList,
					checkWelfareList = this.form.checkWelfareList,
					{
						classa,
						classb
					} = e.currentTarget.dataset

				if (welfareList[classa].levelList[classb].check) {
					welfareList[classa].levelList[classb].check = 0;
					checkWelfareList.map((item, index) => {
						if (item == welfareList[classa].levelList[classb].name) {
							checkWelfareList.splice(index, 1)
						}
					})
				} else {
					welfareList[classa].levelList[classb].check = 1;
					checkWelfareList.push(welfareList[classa].levelList[classb].name)
				}
				this.welfareList = welfareList
				this.form.checkWelfareList = checkWelfareList

				this.initDomTitleFn();
			}
		}
	}
</script>

<style lang="less">
	.checked {
		color: #E41805;
	}

	.tips-txt {
		color: #989898;
	}

	.company-main {
		padding: 0 30rpx;
		margin-bottom: 210rpx;
	}

	.common-tips-box {
		position: fixed;
		background: #fff;
		top: 0;
		left: 0;
		padding: 40rpx 30rpx 20rpx;
		width: calc(100vw - 60rpx);
		z-index: 2;

		.t1 {
			font-size: 48rpx;
			line-height: 48rpx;
			color: #000;
		}

		.t2 {
			margin-top: 30rpx;
			font-size: 28rpx;
			line-height: 36rpx;
			color: #6A6A6A;
		}
	}

	.step-box {
		margin-top: 64rpx;
	}

	.hidden-border {
		border: none !important;
	}

	.logo-item_zp,
	.logo-item_zp image,
	.logo-item_zp.add_zp {
		width: 260rpx;
		height: 260rpx;
		border-radius: 10rpx;
		position: relative;
	}

	.logo-item_zp {
		&.add_zp {
			border: 1rpx solid #BFBFBF;
			text-align: center;
			font-size: 24rpx;
			color: #6A6A6A;
			margin-right: 0 !important;
			vertical-align: top;

			.iconfontPT {
				font-size: 80rpx;
				display: block;
			}
		}

		.txt {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.2);
			color: #fff;
			opacity: 0.8;
			line-height: 260rpx;
			text-align: center;
			font-size: 26rpx;
		}
	}

	.tips-box {
		font-weight: bold;
		font-size: 34rpx;
		float: right;
		line-height: 34rpx;
		vertical-align: bottom;
	}

	.item-box,
	.navigator-box {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #BFBFBF;
		margin-top: 20rpx;
	}

	.item-box {
		textarea {
			width: calc(100% - 40rpx);
			height: 312rpx;
			border: 1rpx solid #BFBFBF;
			border-radius: 10rpx;
			font-size: 30rpx;
			padding: 20rpx;
			margin-top: 30rpx;
		}

		.logo-item_zp {
			width: calc(33.3vw - 44rpx);
			height: calc(33.3vw - 40rpx);
			display: inline-block;
			margin-right: 30rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.iconshanchu {
				font-size: 24rpx;
				position: absolute;
				right: -20rpx;
				top: -20rpx;
				display: block;
				background: #f8f8f8;
				color: #E41805;
				border-radius: 50%;
				border: 1rpx solid #ccc;
				width: 40rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				z-index: 1111;

			}
		}
	}

	.item-box {
		.logo-item_zp {
			&.next {
				margin-right: 0;
			}
		}
	}

	.job-box {
		padding: 38rpx 0 0;
		border-bottom: 1rpx solid #CCC;

		.tit {
			font-size: 30rpx;
			line-height: 30rpx;
		}

		navigator,
		.picker {
			font-size: 30rpx;
			line-height: 30rpx;
			padding: 20rpx 0 30rpx;
		}
	}

	.iconxiayibu {
		font-size: 24rpx;
		color: #999;
	}

	.bg {
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.4);
		width: 100vw;
		height: 100vh;
		z-index: 2;
	}

	.bg {
		&.show {
			display: block;
		}

		&.hidden {
			display: none;
		}
	}

	.showModel-box {
		width: 100vw;
		height: 500rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #fff;
		z-index: 5;
		border-radius: 11rpx 11rpx 0px 0px;
		transition: 200ms;
	}

	.restTime-box,
	.overTime-box {
		padding: 45rpx;
	}

	.common-item {
		width: calc(50% - 44rpx);
		display: inline-block;
		margin: 30rpx 22rpx;
		text-align: center;
		padding: 50rpx 0;
		font-size: 30rpx;
		background: #f8f8f8;
		border-radius: 10rpx;

		&.curr {
			background: #FFD5D1;
			color: #E41805;
		}

	}

	.checkWelfareList-box {
		padding: 20rpx 0 0;
		border-bottom: 1rpx solid #F7F7F7;

		.checkWelfareList-item {
			display: inline-block;
			vertical-align: top;
			padding: 10rpx 20rpx;
			font-size: 24rpx;
			line-height: 24rpx;
			color: #333;
			background: #f8f8f8;
			border-radius: 6rpx;
			margin: 0 20rpx 20rpx 0;
		}
	}


	.for-box {
		padding: 20rpx 0 20rpx;
		border-bottom: 1rpx solid #F7F7F7;

		.tit {
			padding: 30rpx 0;
			font-size: 30rpx;
			color: #333;
			line-height: 30rpx;
			display: block;
		}
	}

	.view-item {
		display: inline-block;
		width: 100%;

		.iconleft {
			display: inline-block;
			margin-right: 48rpx;
			width: 64rpx;
			height: 64rpx;
			font-size: 32rpx;
			background: #04B2E4;
			color: #fff;
			text-align: center;
			line-height: 64rpx;
			border-radius: 50%;
			vertical-align: top;
		}

		.view-right {
			display: inline-block;
			width: calc(100% - 112rpx);
			vertical-align: top;
			padding-bottom: 25rpx;

			.t2 {
				color: #666;
				font-size: 24rpx;
				line-height: 30rpx;
				margin-top: 15rpx;
			}
		}

		.t1 {
			color: #333;
			font-size: 34rpx;
			font-weight: bold;
			line-height: 34rpx;

			.iconright {
				float: right;
				font-size: 36rpx
			}

			.iconxuanzhong {
				color: #46D3A1;
			}
		}

	}
</style>
